<template>
  <view class="report-pane">
    <charttips name="门店库存统计" placement="bottom-start">
      <template #tipcontent>
        <view> 柱状图中的分子、分母说明 </view>
        <view> Y / X：出库车辆数 / 车辆总数 </view>
        <view> Y：租赁中+运维中+已借出的车辆 </view>
        <view>
          <view> X：门店下的全部车辆数，不计算已处置、 </view>
          <view>已归还的车辆</view>
        </view>
      </template>
    </charttips>
    <uChartColumn v-if="inited" canvasId="storeInventory" :uChartData="uChartData" :options="options" @getIndex="getIndex" />
    <ve-popup v-model="toggleDetailStatus" class="store-popup" @close="toggleDetailStatus = false" mode="bottom">
      <view class="popup-tlt">
        <view class="flex">
          <view class="site-label flex">
            <view style="width: 60%">
              <ve-tooltip placement="bottom">
                <template #content> {{ this.tooltipData.siteName }} </template>
                <text class="text-over">{{ this.tooltipData.siteName }}</text>
              </ve-tooltip>
            </view>
            <ve-icon name="delete-data" size="18" @click="toggleDetailStatus = false" />
          </view>
        </view>
        <text class="car-num">车辆总数：{{ this.tooltipData.count }}辆</text>
        <ve-subsection class="mb32" :list="tabs" mode="subsection" :current="current" activeColor="#165DFF" @change="onChange" />
      </view>
      <scroll-view scroll-y class="content">
        <view class="flex model" v-for="(item, index) in list" :key="index">
          <text class="model-text">
            <!-- <ve-tooltip>
              <template #content> {{ item.tmpName }} </template>
              <text class="text-over3">{{ item.tmpName }}</text>
            </ve-tooltip> -->
            {{ item.tmpName }}
          </text>
          <text class="car-num wid40">{{ item.count }} 辆</text>
        </view>
        <ve-empty text="没有数据~" v-if="list.length == 0"></ve-empty>
      </scroll-view>
    </ve-popup>
  </view>
</template>

<script>
  import uChartColumn from '../components/uChartColumn.vue'
  import charttips from '../components/charttips.vue'
  export default {
    props: {
      amount: {
        type: Array,
        default() {
          return []
        },
      },
      pagePath: String,
    },
    components: {
      uChartColumn,
      charttips,
    },
    watch: {
      amount: {
        handler(newVal) {
          this.amountHandler(newVal)
        },
        immediate: true,
      },
    },
    data() {
      return {
        inited: false,
        tabs: [
          {
            name: '车系维度统计',
          },
          {
            name: '车型维度统计',
          },
        ],
        current: 0,
        uChartData: {},
        options: {
          padding: [15, 0, 10, 13],
          // dataLabel: false,
          xAxis: {
            scrollShow: false,
            format: 'storeXaxis',
            marginTop: 10,
          },
          yAxis: {
            data: [
              {
                title: '单位(辆)',
                titleOffsetY: -7,
                titleOffsetX: -10,
                titleFontColor: '#86909C',
              },
            ],
          },
          extra: {
            tooltip: {
              showBox: false,
            },
            column: {
              type: 'meter',
              width: 33,
              meterBorder: 0,
              meterFillColor: '#3072F6',
            },
          },
        },
        showTooltip: false,
        tooltipData: [],
        list: [],
        toggleDetailStatus: false,
      }
    },
    methods: {
      onChange(index) {
        if (index === 0) {
          this.list = this.tooltipData.carSeriesInfoDto || []
        } else {
          this.list = this.tooltipData.carModelInfoDto || []
        }
      },
      openClose() {
        if (this.showTooltip) {
          this.showTooltip = false
        }
      },
      getIndex(index) {
        if (index > -1) {
          this.tooltipData = this.uChartData.series[0].a[index]
          this.tooltipData.carSeriesInfoDto?.forEach((item) => {
            item.tmpName = item.seriesName
          })
          this.tooltipData.carModelInfoDto?.forEach((item) => {
            item.tmpName = item.modelName
          })
          this.list = this.uChartData.series[0].a[index].carSeriesInfoDto || []
          this.toggleDetailStatus = true
        }
      },
      amountHandler(newVal) {
        if (newVal?.length > 0) {
          let categoryList = []
          let carData = []
          let outboundData = []
          if (this.amount.length > 0) {
            this.amount.map((item) => {
              categoryList.push(item.siteName)
              carData.push(item.count)
              outboundData.push(item.outboundCount)
            })
          }

          this.uChartData = {
            categories: categoryList,
            series: [
              {
                color: '#3072F6',
                name: '车辆总数',
                data: carData,
                a: this.amount,
                outboundData: outboundData,
                format: 'carTotalFormatter',
              },
              {
                color: '#8EC9FF',
                name: '出库车辆数',
                textOffset: 17,
                data: outboundData,
                a: this.amount,
                carData: carData,
                format: 'outboundTotalFormatter',
              },
            ],
          }

          // 判断当前页面是否为首页
          setTimeout(() => {
            if (this.pagePath) {
              const pages = getCurrentPages()
              var currentRoute = pages[pages.length - 1].route
              if (currentRoute == this.pagePath) {
                this.inited = true
              }
            } else {
              this.inited = true
            }
          }, 0)
        }
      },
      onShow() {
        console.log('onShow')
        if (!this.inited) {
          this.amountHandler(this.amount)
        }
      },
    },
    mounted() {
      uni.$on('onShow', this.onShow)
    },
    unmounted() {
      uni.$off('onShow', this.onShow)
    },
  }
</script>

<style lang="less" scoped>
  .report-pane {
    position: relative;
    .charts-column-content {
      height: 500rpx;
    }
    .flex {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .pd32 {
      padding: 32rpx;
    }
    .mb32 {
      margin: 10px 0 10px 0;
    }
    .text-over {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .site-label {
      font-size: 36rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      color: #191c27;
    }
    .model {
      padding: 32rpx 0;
      border-top: 1rpx solid rgba(216, 216, 216, 0.3);
      align-items: flex-start;
    }
    .model-text {
      width: 60%;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #191c27;
      line-height: 44rpx;
    }
    .text-over3 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .car-num {
      display: block;
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #3072f6;
    }
  }
  .store-popup {
    /deep/ .ve-popup-content {
      height: 50vh;
      padding: 32rpx;
    }
    .content {
      height: calc(100% - 134rpx);
    }
  }
</style>
